const recorderManager = new RecorderManager() // 创建录制管理器
const videoBox = document.querySelector('.box-video')
const monitor = videoBox.querySelector('video')
monitor.addEventListener('loadedmetadata',()=> {
    monitor.play()
})

// 获取屏幕视频流
async function getScreenStream() {
    let shareStream = await navigator.mediaDevices.getDisplayMedia({
        audio: false,
        video: {
            width: 1920,
            height: 1080,
            frameRate: 30  //帧速率
        }
    })
    return shareStream
}

//获取系统声音流
async function getSysAudioStream() {
    let sysAudioStream = await navigator.mediaDevices.getDisplayMedia({
        audio: true,
        video: true
    })
    return sysAudioStream
}

// 获取麦克风音频流
async function getMicorStream() {
    let micorStream = await navigator.mediaDevices.getUserMedia({
        audio: true,
        video: false
    })
    return micorStream
}

// 获取摄像头视频流
async function getCameraStream() {
    let cameraStream = await navigator.mediaDevices.getUserMedia({
        audio: false,
        video: {
            width: 1920,
            height: 1080,
            frameRate: 30
        }
    })
    return cameraStream
}

//获取全屏视频源
const fullSccrenBut = document.querySelector('#full-sccren')
fullSccrenBut.addEventListener('change', ()=> {
    // 文件名
    const mark = 'SV'
    if(fullSccrenBut.checked) {
        // 获取视频流
        getScreenStream().then(stream => {
            streams.sccrenStream = stream
            monitor.srcObject = stream
            const sccrenRecorder = new CreateRecorder(stream, {type: 'video/webm; codecs=vp8'}, mark)
            recorderManager.addRecorder(mark, sccrenRecorder)
        }).catch(error=> {
            //弹窗提示
            window.alertAPI.alert(error.message)
            //移除fullSccrenBut的 checked属性
            fullSccrenBut.checked = false
        })
    }else {
        // 停止获取视频流
        stopStream(streams.sccrenStream)
        recorderManager.removeRecorder(mark)
        monitor.srcObject = null
    }
})

// 获取摄像头视频流


const audioSysBut = document.querySelector('#audio-sys')
const iconSys = document.querySelector('.iconsys')
const iconBanSys = document.querySelector('.iconbansys')

// 获取系统声音流
audioSysBut.addEventListener('change', ()=> {
    const mark = 'SA'
    if(audioSysBut.checked) {
        getSysAudioStream().then(stream => {
            streams.sysAudioStream = stream
            // 系统声音轨道建立媒体源
            const sysAudioStream = new MediaStream(stream.getAudioTracks())
            // 创建录制器
            const sccrenRecorder = new CreateRecorder(sysAudioStream, {type: 'audio/ogg; codecs=opus'}, mark)
            // 管理录制器
            recorderManager.addRecorder(mark, sccrenRecorder)
            // 改变图标
            iconSys.classList.remove('sys-ishow')
            iconBanSys.classList.add('sys-ishow')
        }).catch(error=> {
            //弹窗提示
            window.alertAPI.alert(error.message)
            //移除fullSccrenBut的 checked属性
            audioSysBut.checked = false
        })
    }else {
        stopStream(streams.sysAudioStream)
        recorderManager.removeRecorder(mark)
        // 改变图标
        iconSys.classList.add('sys-ishow')
        iconBanSys.classList.remove('sys-ishow')
    }
})

const audioMacrBut = document.querySelector('#audio-macr')
const iconMicr = document.querySelector('.iconmicr')
const iconBanMicr = document.querySelector('.iconbanmicr')

// 获取麦克风音频流
audioMacrBut.addEventListener('change', ()=> {
    const mark = 'MA'
    if(audioMacrBut.checked) {
        //获取麦克风流
        getMicorStream().then(stream => {
            streams.micorStream = stream
            const sccrenRecorder = new CreateRecorder(stream, {type: 'audio/ogg; codecs=opus'}, mark)
            recorderManager.addRecorder(mark, sccrenRecorder)
            // 改变图标
            iconMicr.classList.remove('micr-ishow')
            iconBanMicr.classList.add('micr-ishow')
        }).catch(err => {
            // 弹窗提示
            window.alertAPI.alert(error.message)
            audioMacrBut.checked = false
        })
    }else {
        stopStream(streams.micorStream)
        recorderManager.removeRecorder(mark)
        // 改变图标
        iconMicr.classList.add('micr-ishow')
        iconBanMicr.classList.remove('micr-ishow')
    }
})

// 获取摄像头视频流
const cameraBut = document.querySelector('#camera')
cameraBut.addEventListener('change', ()=> {
    if(cameraBut.checked) {
        window.openView.openCameraView()
    }else {
        window.closeView.closeCameraView()
    }
})

//停止获取视频流
function stopStream(stream) {
    stream.getTracks().forEach(track=> {
        track.stop()
    })
    stream = null
}

// 打开关闭水印
const watermarkBut = document.querySelector('#watermark')
watermarkBut.addEventListener('change', ()=> {
    if(watermarkBut.checked) {
        window.openView.openTitleView()
    }else {
        window.closeView.closeTitleView()
    }
})

//修改水印
const watermarkTitle = document.querySelector('#watermark-title')
watermarkTitle.addEventListener('keydown', (e)=> {
    // 判断是否为回车键
    if(e.keyCode === 13) {
        // 修改水印
        window.titleView.updataTitle(watermarkTitle.value)
    }
})

// 打开热键窗口
const hotkeyBut = document.querySelector('#hotkey')
hotkeyBut.addEventListener('change', ()=> {
    if(hotkeyBut.checked) {
        window.openView.openHotkeyView()
    }else {
        window.closeView.closeHotkeyView()
    }
})